<template>
  <div id="app">
    <div class="alert">
      <p>请使用移动端打开！</p>
    </div>
    <div class="main">
      <nav>
        <img v-show="isBack" class="back" src="~@/assets/back.png" alt="" @click="backTo">
        <p class="title">一句</p>
      </nav>
      <router-view />
      <myTab v-show="isTab" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, provide } from 'vue';
import { useRouter } from 'vue-router';
import myTab from './components/myTab.vue';

const router = useRouter()

const isBack = ref(false)
const isTab = ref(true)

provide('app', {
  isBack,
  setIsBack: (val: boolean) => {
    isBack.value = val
  },
  isTab,
  setIsTab: (val: boolean) => {
    isTab.value = val
  }
})

const backTo = () => {
  router.push({path: '/more'})
}


</script>

<style lang="scss">
html,
body,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
    height: 50px;
    background-image: linear-gradient(90deg, #7db1e4 0%, #067df3 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    p {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }

    .back {
      position: absolute;
      left: 16px;
      width: 20px;
      height: 16px;
      top: 15px;
    }
  }

.alert {
  display: none;
}

@media screen and (min-width: 900px) {
  .alert {
    display: block;
  }

  .main {
    display: none;
  }
}
</style>
